<head>
    <link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="/css/gnomus.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.js"></script>
    <script type="text/javascript" src="/js/c.js"></script>
    <script type="text/javascript" src="/js/util.js"></script>
    <script type="text/javascript" src="/js/teach.js"></script>
    <script type="text/javascript" src="/js/draw/shape.js"></script>
    <script type="text/javascript" src="/js/draw/atom.js"></script>
    <script type="text/javascript" src="/js/draw/pt.js"></script>
    <script type="text/javascript" src="/js/play/build_nuclei.js"></script>
    <script type="text/javascript" src="/js/play/atomic_scale.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").button();
            $(".accordion").accordion();
            $(".tabs").tabs();
            $(".dialog").dialog({ autoOpen : false });
            $("body").animate({ opacity : 1 });

            $.each($("canvas.square"), function(i, s) {
                var sq = $(s);
                var e = s2e[sq.attr("element")];
                if (!e) {
                    e = new Element(sq.attr("symbol"), sq.attr("name"), Number(sq.attr("number")), sq.attr("mass"));
                }
                sq.ctx = sq[0].getContext("2d");
                sq.ctx.drawPeriodicSquare(e, 0, 0, sq.ctx.canvas.width);
            });

            $(".tabs").tabs({ show : function(event, ui) {
                window.location.hash = ui.tab.hash.substr(1);
                $("body").scrollTop(0);
            }});
        });
    </script>
</head>
<body style="position:relative;overflow-x:hidden;opacity:0;">
<script type="text/javascript">
    var build_nuclei = [];
    $(document).ready(function() {
        $.each($("div.build_nucleus"), function(i, div) {
            var bn = new BuildNucleus($(div));
            build_nuclei.push(bn);
            bn.start();
        });
    });

    function updateScore() {
        var score = 0;
        var record = true;
        for (var i = 0; i < build_nuclei.length; i++) {
            var bn = build_nuclei[i];
            if (!bn.complete) {
                record = false;
            } else {
                switch(bn.attempts) {
                    case 1 : score += 20; break;
                    case 2 : score += 15; break;
                    case 3 : score += 10; break;
                    default : score += 5; break;
                }
            }
        }
        $("#score").html(score);
        if (code && record) {
            $.post("/lab/record_score", { code : code, score : score },
                    function(response) { alert(response); });
            var x = 0;
        }
    }
</script>
<style type="text/css">
</style>
<div id="atomic_nuclei" class="tabs">
<button id="home" onclick="window.location.href = '/';">Home</button>
<div id="score">0</div>
<ul>
    <li><a href="#guide">Nuclei Guide</a></li>
    <li><a href="#build">Build Nuclei</a></li>

</ul>
<div id="guide" class="accordion" style="width:900px;">
<h3><a name="atom" href="#atom">What is an atom?</a></h3>
<div>
    <table style="width:100%;">
        <tr>
            <td>
                An atom is the basic unit of a chemical element. It consists of:
                <ul>
                    <li>a dense nucleus of protons and neutrons (nucleons)</li>
                    <li>a much less dense electron cloud surrounding the nucleus</li>
                </ul>
                A lithium-7 atom has 3 protons and 4 neutrons in its nucleus.
                <br />
                The model on the right depicts lithium-7's atomic structure without showing
                the electrons in its electron cloud.
            </td>
            <td class="a-right">
                <canvas id="Li-7" width="240px" height="240px"></canvas>
            </td>
        </tr>
    </table>
</div>
<h3><a href="#difference">What's the difference between protons and neutrons?</a></h3>
<div>
    <table style="width:100%;">
        <tr>
            <td style="width:67%;">
                <p>
                    Protons and neutrons are both found in the nuclei of atoms and
                    they both have an atomic mass of one atomic mass unit (amu).
                </p>
                <p>
                    The main difference is that protons each have a charge of one positive
                    elementary charge (e+) while neutrons have no charge.
                </p>
            </td>
            <td>
                <table>
                    <tr>
                        <td>
                            <canvas class="proton" width="48px" height="40px"></canvas>
                        </td>
                        <td>
                            Proton
                            <br />
                            Mass = 1 amu
                            <br />
                            Charge = 1 e+
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <canvas class="neutron" width="48px" height="40px"></canvas>
                        </td>
                        <td>
                            Neutron
                            <br />
                            Mass = 1 amu
                            <br />
                            Charge = 0
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
<h3><a href="#istopes">What are isotopes?</a></h3>
<div>
    <p>
        All the atoms of an element have the same number of protons but the
        number of neutrons varies.
    </p>
    <p>
        Isotopes are the different forms of an element due to variations in
        the number of neutrons.
    </p>
    <table style="width:100%">
        <tr>
            <td class="a-right" style="width:20%;">Name of atom</td>

            <td style="text-align:center;">Hydrogen-1</td>

            <td style="text-align:center;">Hydrogen-2</td>

            <td style="text-align:center;">Hydrogen-3</td>

        </tr>
        <tr>
            <td class="a-right">Model of nucleus</td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="H-1" width="80px" height="80px"></canvas>
            </td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="H-2" width="80px" height="80px"></canvas>
            </td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="H-3" width="80px" height="80px"></canvas>
            </td>

        </tr>
        <tr>
            <td class="a-right">Number of protons</td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;">1</td>
        </tr>
        <tr>
            <td class="a-right">Number of neutrons</td>
            <td class="a-center">0</td>
            <td class="a-center">1</td>
            <td class="a-center">2</td>
        </tr>
    </table>
</div>
<h3><a href="#classify">How do we classify atoms?</a></h3>
<div>
    <p>
        We classify atoms by two properties : atomic number and atomic mass.
    </p>
    <p>
        The atomic number determines which element the atom belongs to.
        Atomic mass determines which isotope of that element the atom belongs to.
    </p>
    <table style="width:100%">
        <tr>
            <td class="a-right" style="width:20%;">Name of atom</td>

            <td style="text-align:center;">Hydrogen-1</td>

            <td style="text-align:center;">Hydrogen-2</td>

            <td style="text-align:center;">Helium-3</td>

            <td style="text-align:center;">Helium-4</td>

        </tr>
        <tr>
            <td class="a-right">Model of nucleus</td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="H-1" width="80px" height="80px"></canvas>
            </td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="H-2" width="80px" height="80px"></canvas>
            </td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="He-3" width="80px" height="80px"></canvas>
            </td>

            <td style="text-align:center;">
                <canvas class="nucleus" atom="He-4" width="80px" height="80px"></canvas>
            </td>

        </tr>
        <tr>
            <td class="a-right">Atomic number</td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;">2</td>
            <td style="text-align:center;">2</td>
        </tr>
        <tr>
            <td class="a-right">Atomic mass</td>
            <td class="a-center">1</td>
            <td class="a-center">2</td>
            <td class="a-center">3</td>
            <td class="a-center">4</td>
        </tr>
    </table>
</div>
<h3><a href="#strong_force">What holds atomic nuclei together?</a></h3>
<div>
    <table width="100%">
        <tr>
            <td width="67%">
                <p>
                    The electromagnetic force is responsible for attraction between
                    opposite charges and repulsion between similar charges.
                </p>
                <p>
                    However, there is a force much stronger than the electromagnetic force.
                    This force is called the strong nuclear force and it is responsible
                    for attraction between nucleons in atomic nuclei.
                </p>
                <p>
                    Unlike the effects of the electromagnetic force which can be felt
                    even at large distances, the effects of the strong nuclear force
                    can only be felt when the particles are very close together (about the
                    diameter of a nucleon or less).
                </p>
            </td>
            <td style="text-align:center;">
                Electromagnetic force
                <br />
                <canvas class="repulsion" width="192px" height="48px"></canvas>
                <br />
                (distance > diameter)
                <hr />
                Strong nuclear force
                <br />
                <canvas class="strong_force" width="192px" height="48px"></canvas>
                <br />
                (distance < diameter)
            </td>
        </tr>
    </table>
</div>
<h3><a href="#electrons">What about electrons?</a></h3>
<div>
    <p>
        We'll save that discussion for another time.
    </p>
</div>

</div>
<div id="build" class="accordion" style="width:900px;">
    <h3><a href="#hydrogen-3">Hydrogen-3</a></h3>
    <div class="build_nucleus" atom="H-3">
    </div>
    <h3><a href="#Helium-6">Helium-6</a></h3>
    <div class="build_nucleus" atom="He-6">
    </div>
    <h3><a href="#Lithium-6">Lithium-6</a></h3>
    <div class="build_nucleus" atom="Li-6">
    </div>
    <h3><a href="#Beryllium-9">Beryllium-9</a></h3>
    <div class="build_nucleus" atom="Be-9">
    </div>
    <h3><a href="#Boron-10">Boron-10</a></h3>
    <div class="build_nucleus" atom="B-10">
    </div>
</div>

</div>
<script>
    $(document).ready(function() {
        $("#guide, #build").find(".ui-accordion-content").css({
            padding : "0 24px 12px"
        });
        $.each($("#guide"), function(i, n) {
            $(n).find("h3 a").click(function(event) {
                window.location.hash = this.hash;
            })
        });
        var atom = $("#Li-7");
        if (atom.length > 0) {
            atom[0].getContext("2d").drawAtomicModel("Li-7", 120, 120, 120);
        }
        $.each($("canvas.repulsion"), function(i, c) {
            var ctx = c.getContext("2d");
            var y = 24;
            ctx.drawProton2(64, y, 16);
            ctx.drawProton2(128, y, 16);
            ctx.drawArrow(48, y, 0, y);
            ctx.drawArrow(144, y, 192, y);
        });
        $.each($("canvas.strong_force"), function(i, c) {
            var ctx = c.getContext("2d");
            var y = 24;
            ctx.drawProton2(80, y, 16);
            ctx.drawProton2(112, y, 16);
            ctx.drawArrow(16, y, 64, y);
            ctx.drawArrow(176, y, 128, y);
        });
        $.each($("canvas.nucleus"), function(i, c) {
            var atom = $(c).attr("atom");
            var scale = $(c).attr("scale");
            var x = 0.5 * c.width;
            var y = 0.5 * c.height;
            c.getContext("2d").drawNucleus(atom, x, y, scale ? scale : 100);
        });
        /*
         var pcc = $("#proton_count")[0].getContext("2d");
         pcc.drawArrow(40, 20, 115, 40);
         pcc.drawArrow(285, 20, 210, 40);
         pcc.drawArrow(40, 140, 115, 120);
         pcc.fillText("1", 25, 20, 100);
         pcc.fillText("2", 25, 140, 100);
         pcc.fillText("3", 300, 20, 100);
         var ncc = $("#nucleon_count")[0].getContext("2d");
         ncc.drawArrow(60, 40, 115, 60);
         ncc.fillText("1", 45, 40, 120);
         ncc.drawArrow(35, 105, 90, 105);
         ncc.fillText("2", 20, 105, 100);
         ncc.drawArrow(60, 160, 115, 140);
         ncc.fillText("3", 45, 160, 100);
         ncc.drawArrow(265, 35, 210, 55);
         ncc.fillText("4", 280, 35, 100);
         ncc.drawArrow(290, 90, 230, 90);
         ncc.fillText("5", 305, 90, 100);
         ncc.drawArrow(275, 160, 220, 140);
         ncc.fillText("6", 290, 160, 100);
         ncc.drawArrow(190, 170, 165, 125);
         ncc.fillText("7", 200, 185, 100);
         */
    });
</script>
</body>